<template>
  <a-layout class="layout">
    <a-layout-header style="background: #ffffff">
      <div class="logo"><img src="@/assets/logo-300_300.png" style="width: 50px;height:50px;border-radius: 100%">&nbsp;wmbyte</div>
      <div class="user-settings">
        <a-button type="link" href="https://gitee.com/stevenlisw/wmbyte"  target="_blank">GitHub<GithubOutlined /></a-button>
      </div>
      <a-menu
          v-model:selectedKeys="selectMenu"
          mode="horizontal"
          :style="{ lineHeight: '64px',width:'80%'}"
      >
        <a-menu-item key="/codegenerator" @click="push('/codegenerator')"><code-outlined /> 代码生成器</a-menu-item>
<!--        <a-menu-item key="2"><send-outlined /> 发送HTTP请求</a-menu-item>-->
        <a-menu-item key="/jsonformat" @click="push('/jsonformat')"><expand-outlined/> JSON美化</a-menu-item>
        <a-menu-item key="/codeformat" @click="push('/codeformat')"><console-sql-outlined/> 代码美化</a-menu-item>
        <a-menu-item key="/article" @click="push('/article')"><file-word-outlined/>面向企业编程</a-menu-item>
        <a-menu-item key="/sourceCode" @click="push('/sourceCode')"><function-outlined/>源码空间</a-menu-item>

      </a-menu>
    </a-layout-header>
    <div class="toolright">
      <ul>
        <li>
          <a-popover placement="left" style="text-align: center">
          <template #content>
            <div class="toolPopover">
              <p class="toolPopoverTitle">加我个人微信，回复<font color="red">【加群】</font><br/>拉你加入百人技术交流群</p>
              <img class="toolPopoverImg" src="https://wmbyte.oss-cn-shanghai.aliyuncs.com/%E4%B8%AA%E4%BA%BA%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg">
              <p class="toolPopoverRemarks">一起学习进步</p>
            </div>
          </template>
            <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M36.9974 21.7112C36.8434 13.0079 29.7401 6 21 6C12.1634 6 5 13.1634 5 22C5 26.1701 6.59531 29.9676 9.20892 32.8154L8.01043 40.0257L15.125 36.9699C18.2597 38.0122 21.218 38.2728 24 37.7516" fill="#2bb80c"/><path d="M36.9974 21.7112C36.8434 13.0079 29.7401 6 21 6C12.1634 6 5 13.1634 5 22C5 26.1701 6.59531 29.9676 9.20892 32.8154L8.01043 40.0257L15.125 36.9699C18.2597 38.0122 21.218 38.2728 24 37.7516" stroke="#2bb80c" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.125 20.4667C16.3676 20.4667 17.375 19.4519 17.375 18.2C17.375 16.9482 16.3676 15.9333 15.125 15.9333C13.8824 15.9333 12.875 16.9482 12.875 18.2C12.875 19.4519 13.8824 20.4667 15.125 20.4667Z" fill="#FFF"/><path d="M24.125 20.4667C25.3676 20.4667 26.375 19.4519 26.375 18.2C26.375 16.9482 25.3676 15.9333 24.125 15.9333C22.8824 15.9333 21.875 16.9482 21.875 18.2C21.875 19.4519 22.8824 20.4667 24.125 20.4667Z" fill="#FFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M38.7618 39.9293C37.0135 41.2302 34.8467 42 32.5 42C26.701 42 22 37.299 22 31.5C22 25.701 26.701 21 32.5 21C38.299 21 43 25.701 43 31.5C43 33.0997 42.6423 34.6159 42.0024 35.9728" fill="#2bb80c"/><path d="M38.7618 39.9293C37.0135 41.2302 34.8467 42 32.5 42C26.701 42 22 37.299 22 31.5C22 25.701 26.701 21 32.5 21C38.299 21 43 25.701 43 31.5C43 33.0997 42.6423 34.6159 42.0024 35.9728" stroke="#2bb80c" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M42.0024 35.9728L43 42L38.7618 39.9293" fill="#2bb80c"/><path d="M42.0024 35.9728L43 42L38.7618 39.9293" stroke="#2bb80c" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M35.6875 30.7999C34.7555 30.7999 34 30.0388 34 29.0999C34 28.161 34.7555 27.3999 35.6875 27.3999C36.6195 27.3999 37.375 28.161 37.375 29.0999C37.375 30.0388 36.6195 30.7999 35.6875 30.7999Z" fill="#FFF"/><path d="M28.9375 30.7999C28.0055 30.7999 27.25 30.0388 27.25 29.0999C27.25 28.161 28.0055 27.3999 28.9375 27.3999C29.8695 27.3999 30.625 28.161 30.625 29.0999C30.625 30.0388 29.8695 30.7999 28.9375 30.7999Z" fill="#FFF"/></svg>
            <p>技术群</p>
        </a-popover>
        </li>
        <li>
          <a-popover placement="left" style="text-align: center">
            <template #content>
              <div class="toolPopover">
                <p class="toolPopoverTitle">关注无名的公众号，领取更多面试、技术、源码资料</p>
                <img class="toolPopoverImg" src="https://wmbyte.oss-cn-shanghai.aliyuncs.com/%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg">
                <p class="toolPopoverRemarks">公众号:程序员无名</p>
              </div>
            </template>
            <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 12L4 24.4322L16 36" stroke="#4a90e2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M32 12L44 24.4322L32 36" stroke="#4a90e2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 17V31" stroke="#4a90e2" stroke-width="4" stroke-linecap="round"/><path d="M18 25L24 31L30 25" stroke="#4a90e2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <p>下载</p>
          </a-popover>
        </li>
        <li>
          <a-popover placement="left" style="text-align: center">
            <template #content>
              <div class="toolPopover">
                <p class="toolPopoverTitle">微信赞赏码</p>
                <img class="toolPopoverImg" src="https://wmbyte.oss-cn-shanghai.aliyuncs.com/%E8%B5%9E%E8%B5%8F%E7%A0%81.png">
                <p class="toolPopoverRemarks">希望能够帮到你呀</p>
                <p class="toolPopoverRemarks">如果无名在某些方面，给到了你一些学习与启发，给无名一个小小的支持与鼓励，同时也是一种动力，感谢陪伴与支持</p>
              </div>
            </template>
            <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 8C8.92487 8 4 12.9249 4 19C4 30 17 40 24 42.3262C31 40 44 30 44 19C44 12.9249 39.0751 8 33 8C29.2797 8 25.9907 9.8469 24 12.6738C22.0093 9.8469 18.7203 8 15 8Z" fill="#ee3a25" stroke="#ee3a25" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <p>支持我</p>
          </a-popover>
        </li>
        <li>
          <a-popover placement="left" style="text-align: center">
            <template #content>
              <a-timeline mode="right">
                <a-timeline-item>
                  <p class="timeline-text">2023-04-17</p>
                  <p class="timeline-text timeline-content">1.0版本上线，涵盖代码生成器、JSON美化、代码美化、面向企业编程</p>
                </a-timeline-item>
                <a-timeline-item>
                  <template #dot><clock-circle-outlined style="font-size: 16px" /></template>
                  <p class="timeline-text">2023-04-19</p>
                  <p class="timeline-text timeline-content">代码生成器，增加建表语句逆向解析功能</p>
                </a-timeline-item>
              </a-timeline>
            </template>
            <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.81836 6.72729V14H13.0911" stroke="#f11515" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C16.598 4 10.1351 8.02111 6.67677 13.9981" stroke="#f11515" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M24.005 12L24.0038 24.0088L32.4832 32.4882" stroke="#f11515" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <p>更新日志</p>
          </a-popover>
        </li>
      </ul>
    </div>
    <a-layout-content :style="{ padding: '0 80px 0px 50px', }">
      <router-view :key="$route.fullPath" />
    </a-layout-content>
    <a-layout-footer :style="{ textAlign: 'center',color:'#333333'}">
      <a href="https://beian.miit.gov.cn" target="_blank" >豫ICP备2023007280号-1</a> <wechat-outlined/>微信公众号:程序员无名
      <a-button type="link" target="_blank" href="https://support.qq.com/product/537910"><bug-outlined/>建议反馈</a-button>
    </a-layout-footer>
  </a-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { RouterView, useRouter, useRoute } from "vue-router";
import { CodeOutlined,GithubOutlined,ConsoleSqlOutlined,ExpandOutlined,BugOutlined,FileWordOutlined,FunctionOutlined,WechatOutlined,ClockCircleOutlined } from '@ant-design/icons-vue';
const route = useRoute();
const selectMenu = ref<string[]>([route.path]);
const selectedSider = ref("");
const router = useRouter();
const push = (url: string) => {
  router.push({
    path: url
  })
};


</script>
<style>
.toolPopover{
  text-align: center;
  width: 200px;
}
.toolPopover .toolPopoverTitle{
  font-size: 0.7rem;
  font-weight: bold;
}
.toolPopover .toolPopoverImg{
  width: 150px;
}
.toolPopover .toolPopoverRemarks{
  margin-top: 10px;
}
.toolright{
  background:#ffffff;
  position: fixed;right: 0px;top: 70px;
}
.toolright ul{
  padding:10px;
}
.toolright ul li{
  color:grey;
  cursor: pointer;
  border-bottom: solid 1px #cccccc;
  width:60px;
  list-style: none;
  text-align: center;
  margin-top: 10px;
}
.toolright ul li:hover{
  background: #eeeeee;
}
.toolright ul li:last-child{
  border-bottom: none;
}
.toolright ul li img{
  width:25px;
}
.logo {
  float: left;
  /*width: 120px;*/
  height: 64px;
  /*line-height: 68px;*/
  /*margin: 16px 24px 16px 0;*/
  text-align: center;
  color:#2c3e50;
  font-weight: 600;
  font-size: 16px;
}

.user-settings {
  float: right;
  line-height: 31px;
  margin: 16px 24px 16px 0;
  text-align: center;
  color:#2c3e50;
  font-weight: 400;
  font-size: 14px;
}

.user-settings a{
  color:#2c3e50;
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}
.timeline-text{
  margin:0px
}
.timeline-content{
  color:#666666;
}
</style>
